<!-- 长按功能组件 -->

<!-- 传入属性 -->
<!-- divWidth:自定义容器宽度  默认100%
     divHeight:自定义容器高度   默认为空
     secondNum:需要长按秒数   默认2秒（只能是整数）
     ifOpenDownload:是否开启长按保存图片功能  开启true  关闭false  （默认false）
     address:下载文件的地址 
     names: 下载文件的名称 -->
        
<!-- 传入方法 -->
<!-- longPress:长按生效方法 -->

<template>
    <div
        class="longPress"
        :style="[{ width: divWidth }, { height: divHeight }]"
        @mousedown.stop="openLonPress"
        @mouseup.stop="closeLongPress"
        @touchstart="openLonPress"
        @touchend="closeLongPress"
    >
        <slot></slot>
    </div>
</template>

<script>
export default {
    props: {
        // 样式属性
        // ---------------------------------------------------------------------------------------------
        // 自定义容器宽度  默认100%
        divWidth: {
            type: [Number, String],
            default: '100%',
        },
        // 自定义容器高度   默认为空
        divHeight: {
            type: [Number, String],
            default: '',
        },

        // 功能属性
        // ---------------------------------------------------------------------------------------------
        // 需要长按秒数   默认2秒（只能是整数）
        secondNum: {
            type: [String, Number],
            default: 2,
        },
        // 是否开启长按保存图片功能  开启true  关闭false  （默认false）
        ifOpenDownload: {
            type: [Boolean],
            default: false,
        },
        // 下载文件的地址
        address: {
            type: [String],
            default: '',
        },
        // 下载文件的名称
        names: {
            type: [String, Number],
            default: '',
        },
    },
    data() {
        return {
            // 定时器接收器
            timer: '',
            // 定时器接收数
            longNum: 1,
        };
    },
    methods: {
        // 按下事件
        openLonPress() {
            this.timer = setInterval(() => {
                // 对定时器接收数 longNum 进行递增
                this.longNum++;

                // 判断定时器接收数据是否达到传入的秒数内容
                if (this.longNum == this.secondNum) {
                    // 在此判断是否是否开启了下载文件开关
                    // ====================================================================
                    if (this.ifOpenDownload) {
                        // 动态创建一个a标签
                        let a = document.createElement('a');
                        // 绑定下载地址
                        a.href = this.address;
                        // 绑定文件名称
                        a.download = this.names;
                        // 执行a标签的点击
                        a.click();
                    }

                    // 使用父组件方法
                    // ====================================================================
                    this.$emit('longPress');
                }
            }, 1000);
        },
        // 抬起事件
        closeLongPress() {
            // 初始化定时器所有数据
            this.longNum = 0;
            clearInterval(this.timer);
        },
    },
};
</script>

<style scoped>
/* 长按功能组件 */
.longPress {
    /* display: inline-block; */
}
</style>
